﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>A JsViews {{tabs}} control</title>
	<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
	<script src="../../jsrender.js" type="text/javascript"></script>
	<script src="../../jquery.observable.js" type="text/javascript"></script>
	<script src="../../jquery.views.js" type="text/javascript"></script>
	<link href="../resources/tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="nav"><a href="../demos.html">JsViews Demos</a></div>

<h3>JsViews 'Tabs' Tag Control: The {{tabs}} tag</h3>

<div id="tabsView">..loading</div>

<script id="myTmpl" type="text/x-jsrender">

	{^{tabs id="outer" width="290px" height="135px" tabCaption="first"}}
		<div class="special">Some tabbed content:</div>
		{^{tabs id="inner" selectedTab=~state.innerSelect height="35px" width="250px" tabCaption="Inner One"}}
			ONE inner
		{{else tabCaption="Inner Two"}}
			TWO  {{:label2}}
		{{else tabCaption="Inner Three"}}
			THREE inner
		{{/tabs}}
	{{else tabCaption="second"}}
		<ul><li>Some</li><li>other</li><li>content</li></ul>
	{{/tabs}}

</script>

<script id="tabsTemplate" type="text/x-jsrender">
	<table class="tabsview"><tbody>
		<tr class="tabstrip">
			{{for ~tag.tagCtxs}}
				<th data-link="class{:'header_' + (#index === ~tag.selectedIndex)}">
					{{:props.tabCaption}}
				</th>
			{{/for}}
		</tr>
		<tr class="tabscontent">
			<td colspan="{{:~tag.tagCtxs.length}}">
				<div style="width:{{>~tag.width}}; height:{{>~tag.height}}">
					{^{for tmpl=~tag.tagCtxs[~tag.selectedIndex].content/}}
				</div>
			</td>
		</tr>
	</tbody></table>
</script>

<script type="text/javascript">
	$.views.tags({
		tabs: {
			setTab: function(index) {
				$.observable(this).setProperty("selectedIndex", index);
			},
			init: function(tagCtx) {
				this.width = tagCtx.props.width;
				this.height = tagCtx.props.height;
				this.selectedIndex = tagCtx.props.selectedTab || 0;
			},
			render: function() {
				var tagCtx = this.tagCtx, view = tagCtx.view;

				return this.selectedIndex === tagCtx.index ? this.template.render(view, tagCtx.ctx) : "";
			},
			onAfterLink: function() {
				var self = this;
				self.contents(".tabstrip", true).first()
					.on("click", ".header_false", function() {
						self.setTab($.view(this).index);
					});
			},
			onDispose: function() {
				if (this.tagCtx.props.id === "inner") {
					this.tagCtx.ctx.state.innerSelect = this.selectedIndex;
				}
			},
			template: "#tabsTemplate"
		}
	});

	var state = { innerSelect: 1 },
		myTmpl = $.templates("#myTmpl");

	myTmpl.link("#tabsView", {label2: "Inner Tab Label2"}, {state: state});

</script>
</body>
</html>
